const Navigation = {
    template: `
      <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
          <!-- Logo -->
          <a href="/" class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-2">
              <i class="fa fa-shopping-bag text-xl text-primary"></i>
            </div>
            <span class="text-xl font-bold text-dark">淘好货</span>
          </a>

          <!-- 搜索框 - 桌面版 -->
          <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
            <div class="relative w-full">
              <input
                  type="text"
                  v-model="searchQuery"
                  placeholder="搜索商品..."
                  class="w-full h-10 pl-4 pr-10 rounded-full border-2 border-primary/30 focus:outline-none focus:ring-2 focus:ring-primary/20"
                  @keyup.enter="search">
              <button
                  type="submit"
                  @click="search"
                  class="absolute right-0 top-0 h-full w-12 bg-primary text-white rounded-full flex items-center justify-center">
                <i class="fa fa-search"></i>
              </button>
            </div>
          </div>

          <!-- 导航菜单 -->
          <div class="flex items-center space-x-4">
            <!-- 购物车 -->
            <div class="relative">
              <a href="/cart" class="flex items-center p-2 rounded-full hover:bg-gray-100 transition-custom">
                <i class="fa fa-shopping-cart text-xl text-muted"></i>
              </a>
            </div>

            <!-- 用户菜单 -->
            <div class="relative">
              <button
                  class="flex items-center p-2 rounded-full hover:bg-gray-100 transition-custom"
                  @click="toggleUserMenu"
              >
                <i class="fa fa-user-o text-xl text-muted"></i>
              </button>

              <!-- 用户下拉菜单 -->
              <transition name="user-menu">
                <div
                    v-show="showUserMenu"
                    class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-50"
                    @click.stop
                >
                  <a href="/my" class="block px-4 py-3 text-sm hover:bg-gray-50">
                    <i class="fa fa-user-circle mr-2 text-muted"></i>个人中心
                  </a>
                  <a href="/order" class="block px-4 py-3 text-sm hover:bg-gray-50">
                    <i class="fa fa-list-alt mr-2 text-muted"></i>我的订单
                  </a>
                  <a href="#" class="block px-4 py-3 text-sm hover:bg-gray-50">
                    <i class="fa fa-heart-o mr-2 text-muted"></i>我的收藏
                  </a>
                  <div class="border-t border-gray-100"></div>
                  <a href="/logout" class="block px-4 py-3 text-sm hover:bg-gray-50">
                    <i class="fa fa-sign-out mr-2 text-muted"></i>退出登录
                  </a>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </nav>
    `,
    data() {
        return {
            searchQuery: '',
            showUserMenu: false
        }
    },
    methods: {
        search() {
            if (this.searchQuery.trim()) {
                // 跳转到搜索结果页面，URL中包含搜索关键词
                window.location.href = `/search?keyword=${encodeURIComponent(this.searchQuery)}`;
            }
        },
        toggleUserMenu() {
            this.showUserMenu = !this.showUserMenu;
        },
        closeUserMenu(e) {
            // 点击菜单外部时关闭
            if (!this.$el.contains(e.target)) {
                this.showUserMenu = false;
            }
        },
        getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            return parts.length === 2 ? parts.pop().split(';').shift() : null;
        },
    },
    created() {
        // 添加全局点击事件监听
        document.addEventListener('click', this.closeUserMenu);

    },
    beforeDestroy() {
        // 移除事件监听
        document.removeEventListener('click', this.closeUserMenu);
    }
}

// 添加动画样式
const style = document.createElement('style');
style.textContent = `
/* 下拉菜单动画 */
.user-menu-enter-active, .user-menu-leave-active {
    transition: all 0.2s ease;
    transform-origin: top right;
}
.user-menu-enter, .user-menu-leave-to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
}

/* 防止点击菜单时触发外部点击事件 */
.user-menu > * {
    pointer-events: auto;
}

/* 导航栏样式增强 */
.navigation {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 搜索框聚焦效果 */
input:focus {
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.3);
}

`;
document.head.appendChild(style);

Vue.component('navigation', Navigation);